<script setup lang="ts">
import myAxios from "../../../plugins/myAxios.ts";
import {computed, reactive, ref} from "vue";
import {Message, PaginationProps} from "@arco-design/web-vue";
import {allDataStore} from "../../../stores/data.ts";
import axios from "axios";

const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    width: 180,
    fixed: 'left'
  },
  {
    title: '用户邮箱',
    dataIndex: 'userEmail',
    fixed: 'left',
    width: 120
  },
  {
    title: '密码',
    dataIndex: 'userPassword',
    width: 120
  },
  {
    title: '用户昵称',
    dataIndex: 'userName',
    width: 120
  },
  {
    title: '用户头像',
    dataIndex: 'userAvatar',
    width: 120
  },
  {
    title: '用户简介',
    dataIndex: 'userProfile',
    width: 180,
  },
  {
    title: '用户角色',
    dataIndex: 'userRole',
    width: 120
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 120
  }, {
    title: '更新时间',
    dataIndex: 'updateTime',
    width: 280
  },{
    title: '是否删除',
    dataIndex: 'isDelete',
    width: 200
  }
];
const dataStore = allDataStore();
const visible = ref(false);
const form = reactive({
  id: '',
  userEmail: '',
  userName: '',
  userAvatar: '',
  userProfile: '',
  userRole: '',
});
const commitType = ref('')
// const isLoading = ref(true)
const pagination: PaginationProps = reactive({
  total: computed(() => dataStore.userRes.total),
  pageSize: computed(() => dataStore.userRes.size),
  current: computed(() => dataStore.userRes.current)
})
const users = computed(() => dataStore.userRes.records);
const isLoading = ref(false)
const handleChange = async (page) => {
  isLoading.value = true
  await dataStore.getUsers(page, pagination.pageSize)
  isLoading.value = false
}

const update = (id) => {
  visible.value = true
  if (typeof id === "string") {
    commitType.value = 'update'
    const user = users.value.filter((item) => item.id === id)
    form.id = user[0].id
    form.userEmail = user[0].userEmail
    form.userName = user[0].userName
    form.userAvatar = user[0].userAvatar
    form.userProfile = user[0].userProfile
    form.userRole = user[0].userRole
  } else {
    commitType.value = 'add'
    form.userName = ""
    form.userEmail = ""
    form.userAvatar = ""
    form.userProfile = ""
    form.userRole = ""
  }
}
const deleteUser = async (id) => {
  const res = await myAxios.post("/user/delete", {id: id})
  if (res.code === 0) {
    Message.success("删除成功")
    await dataStore.getUsers(pagination.current, pagination.pageSize)
  } else {
    Message.error("删除失败")
  }
}
const handleBeforeOk = async (done) => {
  if (commitType.value === 'update') {
    const res = await myAxios.post("/user/update", form)
    if (res.code === 0) {
      Message.success("修改成功")
      await dataStore.getUsers(pagination.current, pagination.pageSize)
      done()
    } else {
      Message.error("修改失败")
    }
  } else {
    const res = await myAxios.post("/user/add", form)
    if (res.code === 0) {
      Message.success("新增成功")
      await dataStore.getUsers(pagination.current, pagination.pageSize)
      done()
    } else {
      Message.error("新增失败")
    }
  }
};
const handleCancel = () => {
  visible.value = false;
}

// onMounted(() => {
//   getUsers(pagination.current, pagination.pageSize)
// })
</script>

<template>
  <div id="admin-user">
    <a-button class="ml-2 mb-2" status="success" @click="update">
      <icon-plus/> 新增
    </a-button>
    <a-table :scroll="{x: 2000,y: '100%'}"
             :data="users"
             :filter-icon-align-left="true"
             @change="handleChange"
             table-layout-fixed
             :row-selection="{type: 'checkbox',showCheckedAll: true}"
             :pagination="pagination"
             stripe
             :loading="isLoading"
    >
      <template #columns>
        <a-table-column v-for="col in columns"
                        :title="col.title"
                        :data-index="col.dataIndex"
                        :width="col?.width"
                        :ellipsis="true"
                        :tooltip="true"
                        :fixed="col?.fixed"
        ></a-table-column>
        <a-table-column fixed="right" :width="200" title="操作">
          <template #cell="{ record }">
            <a-button class="ml-2 mr-2" status="success" @click="update(record.id)">编辑</a-button>
            <a-button status="danger" @click="deleteUser(record.id)">删除</a-button>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <a-modal v-model:visible="visible" title="信息填写" @cancel="handleCancel" @before-ok="handleBeforeOk">
      <a-form :model="form">
        <a-form-item field="userName" label="邮箱">
          <a-input v-model="form.userEmail" />
        </a-form-item>
        <a-form-item field="userName" label="昵称">
          <a-input v-model="form.userName" />
        </a-form-item>
        <a-form-item field="userName" label="头像">
          <a-input v-model="form.userAvatar" />
        </a-form-item>
        <a-form-item field="userName" label="用户简介">
          <a-input v-model="form.userProfile" />
        </a-form-item>
        <a-form-item field="userName" label="角色">
          <a-select v-model="form.userRole" >
            <a-option>admin</a-option>
            <a-option>user</a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped>
#admin-user {
  height: 88vh;
}
</style>